<template>
    <div class="exam-setting">
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <span>考试设置</span>
            <el-button 
              type="primary" 
              @click="saveExamSettings"
            >
              保存设置
            </el-button>
          </div>
        </template>
        
        <el-tabs v-model="activeTab">
          <el-tab-pane label="基本设置" name="basic">
            <el-form :model="examSettings" label-width="180px">
              <el-form-item label="考试名称">
                <el-input v-model="examSettings.name" placeholder="请输入考试名称" />
              </el-form-item>
              <el-form-item label="考试科目">
                <el-select v-model="examSettings.subject" placeholder="请选择考试科目">
                  <el-option label="科目一" value="1" />
                  <el-option label="科目四" value="4" />
                </el-select>
              </el-form-item>
              <el-form-item label="考试时间(分钟)">
                <el-input-number 
                  v-model="examSettings.duration" 
                  :min="10" 
                  :max="180"
                />
              </el-form-item>
              <el-form-item label="及格分数">
                <el-input-number 
                  v-model="examSettings.passingScore" 
                  :min="0" 
                  :max="100"
                />
              </el-form-item>
              <el-form-item label="考试开始时间">
                <el-date-picker
                  v-model="examSettings.startTime"
                  type="datetime"
                  placeholder="选择考试开始时间"
                />
              </el-form-item>
              <el-form-item label="考试结束时间">
                <el-date-picker
                  v-model="examSettings.endTime"
                  type="datetime"
                  placeholder="选择考试结束时间"
                />
              </el-form-item>
              <el-form-item label="允许补考次数">
                <el-input-number 
                  v-model="examSettings.retakeTimes" 
                  :min="0" 
                  :max="5"
                />
              </el-form-item>
              <el-form-item label="考试说明">
                <el-input 
                  v-model="examSettings.description" 
                  type="textarea" 
                  :rows="4"
                  placeholder="请输入考试说明"
                />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          
          <el-tab-pane label="题目设置" name="questions">
            <div class="question-settings">
              <div class="question-type">
                <h3>单选题设置</h3>
                <el-form :inline="true" :model="examSettings.singleChoice">
                  <el-form-item label="题目数量">
                    <el-input-number 
                      v-model="examSettings.singleChoice.count" 
                      :min="0" 
                      :max="100"
                    />
                  </el-form-item>
                  <el-form-item label="每题分值">
                    <el-input-number 
                      v-model="examSettings.singleChoice.score" 
                      :min="1" 
                      :max="10"
                    />
                  </el-form-item>
                  <el-form-item label="难度比例">
                    <el-select v-model="examSettings.singleChoice.difficultyRatio" multiple>
                      <el-option label="简单" value="easy" />
                      <el-option label="中等" value="medium" />
                      <el-option label="困难" value="hard" />
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
              
              <div class="question-type">
                <h3>判断题设置</h3>
                <el-form :inline="true" :model="examSettings.judgment">
                  <el-form-item label="题目数量">
                    <el-input-number 
                      v-model="examSettings.judgment.count" 
                      :min="0" 
                      :max="100"
                    />
                  </el-form-item>
                  <el-form-item label="每题分值">
                    <el-input-number 
                      v-model="examSettings.judgment.score" 
                      :min="1" 
                      :max="10"
                    />
                  </el-form-item>
                  <el-form-item label="难度比例">
                    <el-select v-model="examSettings.judgment.difficultyRatio" multiple>
                      <el-option label="简单" value="easy" />
                      <el-option label="中等" value="medium" />
                      <el-option label="困难" value="hard" />
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
              
              <div class="question-type">
                <h3>简答题设置</h3>
                <el-form :inline="true" :model="examSettings.shortAnswer">
                  <el-form-item label="题目数量">
                    <el-input-number 
                      v-model="examSettings.shortAnswer.count" 
                      :min="0" 
                      :max="20"
                    />
                  </el-form-item>
                  <el-form-item label="每题分值">
                    <el-input-number 
                      v-model="examSettings.shortAnswer.score" 
                      :min="5" 
                      :max="20"
                    />
                  </el-form-item>
                  <el-form-item label="难度比例">
                    <el-select v-model="examSettings.shortAnswer.difficultyRatio" multiple>
                      <el-option label="简单" value="easy" />
                      <el-option label="中等" value="medium" />
                      <el-option label="困难" value="hard" />
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="高级设置" name="advanced">
            <el-form :model="examSettings" label-width="180px">
              <el-form-item label="随机出题">
                <el-switch v-model="examSettings.randomQuestions" />
              </el-form-item>
              <el-form-item label="题目乱序">
                <el-switch v-model="examSettings.shuffleQuestions" />
              </el-form-item>
              <el-form-item label="选项乱序">
                <el-switch v-model="examSettings.shuffleOptions" />
              </el-form-item>
              <el-form-item label="显示答案">
                <el-switch v-model="examSettings.showAnswers" />
              </el-form-item>
              <el-form-item label="显示解析">
                <el-switch v-model="examSettings.showAnalysis" />
              </el-form-item>
              <el-form-item label="允许查看成绩">
                <el-switch v-model="examSettings.allowViewScore" />
              </el-form-item>
              <el-form-item label="允许查看排名">
                <el-switch v-model="examSettings.allowViewRanking" />
              </el-form-item>
              <el-form-item label="考试密码">
                <el-input 
                  v-model="examSettings.password" 
                  placeholder="如需设置考试密码请填写"
                  show-password
                />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </template>
  
  <script>
  import { ref, reactive } from 'vue'
  
  export default {
    name: 'ExamSetting',
    setup() {
      const activeTab = ref('basic')
      
      // 考试设置
      const examSettings = reactive({
        name: '2024年第三季度驾校考试',
        subject: '1',
        duration: 45,
        passingScore: 90,
        startTime: '',
        endTime: '',
        retakeTimes: 2,
        description: '',
        singleChoice: {
          count: 50,
          score: 1,
          difficultyRatio: ['easy', 'medium', 'hard']
        },
        judgment: {
          count: 20,
          score: 1,
          difficultyRatio: ['easy', 'medium', 'hard']
        },
        shortAnswer: {
          count: 5,
          score: 6,
          difficultyRatio: ['medium', 'hard']
        },
        randomQuestions: true,
        shuffleQuestions: true,
        shuffleOptions: true,
        showAnswers: false,
        showAnalysis: false,
        allowViewScore: true,
        allowViewRanking: false,
        password: ''
      })
      
      // 保存考试设置
      const saveExamSettings = () => {
        console.log('保存考试设置:', examSettings)
      }
      
      return {
        activeTab,
        examSettings,
        saveExamSettings
      }
    }
  }
  </script>
  
  <style scoped>
  .exam-setting {
    padding: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .question-settings {
    padding: 20px;
  }
  
  .question-type {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
  }
  
  .question-type h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #303133;
  }
  </style>